<template>
	<view class="zone">
		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar2">
					<view class="n_left">
						<u-icon class="back" size="20px" color="#fff" @click="$p.back()" name="arrow-left"></u-icon>
						<text>西游大逃杀</text>
					</view>
				</view>
			</view>
		</u-navbar>

		<!--  -->
		<view class="posa1" @click="$p.navto('/pages/home/wolfkillrule')">
			<text>玩法</text>
			<u-icon name="arrow-right" color="#fff" size="15"></u-icon>
		</view>

		<!-- @click="$p.navto('/pages/home/wolfkillalog')"  -->
		<view class="posa2" @click="$p.navto('/pages/home/wolfkillalog')">
			<text>记录</text>
			<u-icon name="arrow-right" color="#fff" size="15"></u-icon>
		</view>

		<view class="posa3">
			<text>水晶剩余</text>
			<text>{{crystal}}个</text>
		</view>

		<view class="main">
			<view class="minh">
				<view class="stat" v-show="gamestatus==0">
					<p>第{{phase}}期</p>
					<view class="stat-b">
						<text> {{join_num}}/10</text>
						<text>满人开始</text>
					</view>
				</view>
				<view class="stat2" v-show="gamestatus==1">
					<image src="http://img.cpgm.cc/panda/static/wolfkill/dasheng.png" mode="widthFix" />
					<text>{{second}}秒后大圣开始除妖</text>
				</view>
			</view>

			<!-- 中间选择人物部分 -->
			<view class="box">
				<image class="bg" src="http://img.cpgm.cc/panda/static/active/yiji.png" mode="widthFix" />
				<view class="item" :class="['img' + (index+1), stat== index?'active':'']"
					v-for="(item,index) in werewolf_log" :key="index" @click="choose(index)">
					<image :src="'http://img.cpgm.cc/panda/static/wolfkill/' + (index + 1) + '.png'" mode="widthFix" />
					<view class="numbox">
						<text class="left">{{item.people_num}}人</text>
						<view class="line2"></view>
						<view class="sjbox">
							<image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="widthFix" />
							<text>{{ item.invest_sum}}</text>
						</view>
					</view>
				</view>
			</view>


			<view class="bottom">
				<view class="sanjbox" v-if="invest_status != 0">
					已选择「{{name[building_id-1]}}」 <image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="widthFix" /> {{my_invest_sum}}
				</view>
				<image class="das" src="http://img.cpgm.cc/panda/static/wolfkill/dasheng.png" mode="widthFix" />
				<view class="botbtn button" @click="invest()">{{btntext}}</view>

				<!-- <view class="btn">
					<view class="left"  @click="opentips">
						投入水晶
					</view>
					<view class="line"></view>
					<view class="right"  @click="opentips">
						<text>10水晶</text>
						<u-icon name="arrow-down" color="#000" size="20"></u-icon>
					</view>
				</view> -->
			</view>
		</view>


		<!-- 选择要投入的水晶 -->
		<u-popup v-model="show" mode="bottom" border-radius="24">
			<view class="popbox">
				<image class="closed" @click="show=false" src="http://img.cpgm.cc/panda/static/feed/cha.png"
					mode="widthFix" />
				<view class="title">您要投入多少水晶？</view>
				<view class="procontent">
					<p>水晶数量</p>
					<view class="flexcen">
						<view class="price" :class="[p_stat == index?'active2':'',index>3?'w3':'']" v-for="(item,index) in price"
							:key="index" @click="change(index)">
							{{item.money}}个
						</view>
						<view class="price w3" :class="[p_stat == 6?'active2':'']" @click="change(6)">
							全投
						</view>
					</view>
					<u-checkbox-group class="checkgroup">
						<u-checkbox v-model="checked22" :label-disabled="true" size="28"
							active-color="#FF456B" shape="circle" class="checkbox">
							<view class="explain2">
								<span>我同意</span>
								<text class="yellow" @click="xieyishow = true">《参与活动风险提示》</text>
							</view>
						</u-checkbox>
					</u-checkbox-group>

					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button"
						@click="touru()">扮演{{name[stat]}}</u-button>
					<p class="explain">投入的水晶越多，幸存成功后瓜分的水晶越多</p>
				</view>
			</view>
		</u-popup>


		<!-- 击杀时间 -->
		<u-mask :show="show2">
			<view class="warp">
				<view class="fightbox">
					<image class="fight" src="http://img.cpgm.cc/panda/static/wolfkill/kill.gif" mode="widthFix" />
				</view>
			</view>
		</u-mask>


		<!-- 成功瓜分 -->
		<u-mask :show="show3">
			<view class="warp">
				<view class="maskbox mbg2">
					<img class="masktit" src="http://img.cpgm.cc/panda/static/feed/masktit.png" alt="">
					<view class="m_title m_title2">
						<text>恭喜您</text>
					</view>
					<view class="whitebg">
						<p>幸存者瓜分<text>{{result_sum}}</text>水晶</p>
						<image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="widthFix" />
						<p class="black">大圣赶跑了「{{name[visiting_id -1]}}」，你成功逃过一劫</p>
						<view class="maskbtn">
							<view class="button btn3" @click="createnew()">开心收下</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>

		<!-- 你被抓到 -->
		<u-mask :show="show4" :custom-style="{background: 'rgba(53, 8, 5, 0.81)'}">
			<view class="warp">
				<view class="maskbox mbg3">
					<img class="masktit" src="http://img.cpgm.cc/panda/static/wolfkill/word.png" alt="">
					<view class="m_title m_title3">
						<text>很遗憾</text>
					</view>
					<view class="whitebg">
						<!-- <p>成功瓜分<text>{{result_sum}}1</text>水晶</p> -->
						<!-- <image src="http://img.cpgm.cc/panda/static/index/3.png" mode="widthFix" /> -->
						<p class="white">大圣赶跑了「{{name[visiting_id -1]}}」，你被赶跑</p>
						<view class="maskbtn">
							<view class="button btn4" @click="createnew2()">再接再厉</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>



		<u-mask :show="xieyishow" z-index="999999">
			<view class="warp">
				<view class="mask_xy">
					<view class="x_title">参与活动风险提示</view>
					<view class="x_con">
						<p>1、对于平台不时发布的活动，用户理解并同意按自愿原则参与，在平台规则内自行承担因参与活动产生的任何风险及后果;</p>
						<p>2、禁止用户利用平台活动或规则参与或组织违法活动，平台对于因用户存在违法行为造成的损失免责;</p>
						<p>3、平台将定期或不定期安排人员监管用户行为，对于明显不合理的行为等异常情况进行审核;</p>
						<p>4、对用户任何涉嫌违法的行为，平台将加大监测，并鼓励知情者向客服投诉，平台对用户利用平台规则进行违法行为零容忍;</p>
						<p>5、为维护所有用户的权益，对于破坏平台规则，干扰其他用户的用户，平台视情况采取冻结账号等限制措施，涉嫌违法违规的用户依法提供合理解释及证明后，限制措施解除。</p>
					</view>
					<view class="button" @click="xieyishow = false">确定</view>
				</view>
			</view>
		</u-mask>
		
	</view>
</template>

<script>
var ds
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'transparent',
				},
				checked22:true,
				xieyishow:false,
				show: false,
				price: [
					{
						id: 1,
						money: 0.1
					},
					{
						id: 2,
						money: 0.5
					},
					{
						id: 3,
						money: 2.8
					},
					{
						id: 4,
						money: 8
					},
					{
						id: 5,
						money: 40
					}
				],
				stat: -1,
				userinfo: '',
				gamestatus: 0, //0未开始1进行中2流局3已结束
				btntext: '投入', //按钮文字
				show2: false, //正在行动
				show3: false, //
				show4:false,
				name: ['牛魔王', '白骨精', '铁扇公主', '蝎子精', '羊力大仙', '玉兔精', '金翅大鹏', '九尾妖狐'],
				userinfo: uni.getStorageSync('userinfo'),
				p_stat: 0, //默认选择投入的水晶
				sj: 0.1, //投入的水晶数量
				werewolf_log: [],
				werewolf_log2: [],
				werewolf_detail: '', //人物信息
				join_num: 0, //本期参与总人数
				invest_status: '', //是否投资
				last_result_msg: '', //最后结果
				visiting_id: '', //到访者id
				savesele: 1,
				last_result: '', //上一期数据
				timer: '',
				isconect: false,
				second: 60, //倒计时
				gamestatus: 0, //0未开始1进行中2流局3已结束
				building_id: '',
				my_invest_sum:'',
				phase:'',
				result_sum:'',
				crystal:'',
				allmoney:0,
				isclose:false,
			};
		},

		onShow() {
			this.getUserInfo()
			this.werewolf()
		},
		onUnload() {
			this.isclose = true
			uni.closeSocket()
			clearInterval(this.timer)
			this.timer = ''
		},
		methods: {
			createnew(){
				this.werewolf2()
				this.getUserInfo()
				this.show3 = false
			},
			createnew2(){
				this.werewolf2()
				this.getUserInfo()
				this.show4 = false
			},
			// 选择投入水晶的数量
			change(index) {
				this.p_stat = index
				if(index < 6) {
					this.sj = this.price[index].money
				}else {
					this.sj = Math.floor(Number(this.allmoney));
					// console.log(Math.floor(Number(this.allmoney)));
				}
				
			},

			// 获取用户信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				this.userinfo = res.data
				this.crystal = res.data.crystal
				this.allmoney = res.data.crystal
			},

			opentips() {
				this.$u.toast('即将上线');
			},
			// 选择人物
			choose(index) {
				// console.log(this.building_id  ,this.werewolf_log2[index].building_id);
				this.stat = index
				if (this.invest_status == 1) {
					if (this.werewolf_log2[index].building_id == this.building_id) {
						this.btntext = '投入'
					} else {
						this.btntext = '转投'
					}
				} else {
					this.btntext = '投入'
				}
			},
			// 投入
			invest() {
				if (this.stat == -1) {
					this.$u.toast('请选择一个角色')
				} else if (this.invest_status == 1 && this.werewolf_log[this.stat].building_id != this.building_id) {
					this.wolfchangeInvest(this.werewolf_log[this.stat])
				} else {
					this.show = true
				}
			},

			// 投入水晶
			touru() {
				if(this.checked22) {
					if(this.sj <= 0) {
						this.$u.toast('水晶不足')
					}else {
						this.wolfinvest(this.werewolf_log[this.stat])
					}
				}else {
					this.$u.toast('请阅读并同意协议');
				}
			},

			// 玩家投入水晶
			async wolfinvest(item) {
				let data = {
					type: "invest",
					data: {
						invest_num: this.sj,
						building_id: item.building_id,
						p_id: item.p_id
					}
				}
				data = JSON.stringify(data)
				// 传递参数给服务器
				uni.sendSocketMessage({
					data: data
				});
			},

			// 转投
			async wolfchangeInvest(item) {
				console.log(item);
				let data = {
					type: 'change_invest',
					data: {
						p_id: item.p_id,
						new_building_id: item.building_id
					},
				}
				data = JSON.stringify(data)
				// 传递参数给服务器
				uni.sendSocketMessage({
					data: data
				});
			},

			// 获取首页信息 链接socket
			getinfo() {
				let token = uni.getStorageSync('token');
				this.socketTask = uni.connectSocket({
					url: 'ws://cwwx.qxgm.site:2382?token=' + token,
					method: 'GET',
					complete: (res) => {
						uni.onSocketOpen((res) => {
							this.issuccess = true
							// 加入房间
							let data = {
								type: "join",
								data:[]
							}
							data = JSON.stringify(data)
							// 传递参数给服务器
							uni.sendSocketMessage({
								data: data
							});
							this.heart() // xintiao
							// 监听服务器返回的数据
							uni.onSocketMessage((res) => {
								let d = JSON.parse(res.data)
								switch (d.type) {
									case 'invest':
										this.$u.toast(d.msg)
										this.crystal = d.data.crystal
										this.my_invest_sum = d.data.my_invest_sum
										this.building_id = d.data.building_id
										this.invest_status = 1
										this.show = false  //关闭弹窗
										break;

									case 'list':
										this.drawinfo(d)
										break;

									case 'error':
										this.$u.toast(d.msg)
										break;

									case 'change_invest':
										this.$u.toast(d.msg)
										this.building_id = d.data.building_id
										this.btntext = '投入'
										
										break;

									case 'game_start':
										this.kaiju(d);
										break;
									case 'werewolf_res':
										this.result(d)
										break;

								}
							});
						});
					},
					success: (res) => {

					},
				});


				// // 监听连接关闭 -
				this.socketTask.onClose((e) => {
					console.log('WebSocket连接关闭！');
					clearInterval(this.timer)
					this.timer = ''
					if(!this.isclose) {
						this.getinfo()
					}
				})

				this.socketTask.onError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');

					//进入重新连接
					this.getinfo()
				})
			},

			// 重新赋值最新数据
			drawinfo(data){
				this.werewolf_log = data.data.list
				this.join_num = data.data.join_num
			},

			//心跳
			heart() {
				clearInterval(this.timer);
				this.timer = '';
				let msg = {
					type: "heartbeat",
					data:{}
				}
				this.timer = setInterval(() => {
					// 传递参数给服务器
					uni.sendSocketMessage({
						data: JSON.stringify(msg)
					});
				}, 30000)
			},

			// 投入成功操作
			investsc(data){
				this.$u.toast('投入成功')
				this.show = false
			},
			// 开始对局
			kaiju(d) {
				this.gamestatus = 1
				// 判断是否开局
				let currentTimestamp = new Date().getTime();
				let time = d.start_time
				let remainingTime = (time * 1000 + 60000) - currentTimestamp;
				var remainingSeconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
				this.second = remainingSeconds;
				// console.log(this.second);
				// 倒计时未结束时开始倒计时
				if (this.second > 0) {
					clearInterval(ds)
					ds = setInterval(() => {
						this.second--
						if (this.second <= 0) {
							this.second = 0
							clearInterval(ds)
						}
					}, 1000);
				} else {
					// 否则结束倒计时，开始揭露身份
					this.second = 0
				}
			},

			// 结束
			result(d){
				this.visiting_id = d.data.visiting_id
				this.result_sum = d.data.result_sum
				this.show2 = true
				setTimeout(()=>{
					this.show2 = false
					if(this.visiting_id == this.building_id) {
						this.show4 = true
					}else {
						this.show3 = true
					}
				},1500)
			},

			// 获取反贼杀首页信息
			async werewolf() {
				let res = await this.$http.index.werewolf()
				// console.log(res);
				this.gamestatus = res.data.werewolf_detail.status //游戏
				this.werewolf_detail = res.data.werewolf_detail
				this.werewolf_log = res.data.werewolf_log //村民信息
				this.werewolf_log2 = res.data.werewolf_log //村民信息
				this.phase = res.data.werewolf_detail.phase
				this.join_num = res.data.join_num
				this.invest_status = res.data.invest_status
				this.last_result = res.data.last_result
				this.my_invest_sum = res.data.my_invest_sum
				// 获取我投资的房屋
				this.building_id = res.data.building_id?res.data.building_id:0
				// 判断是否开局
				if (this.werewolf_detail.status == 1) {
					let currentTimestamp = new Date().getTime();
					let time = res.data.werewolf_detail.start_time
					let remainingTime = (time * 1000 + 60000) - currentTimestamp;
					var remainingSeconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
					this.second = remainingSeconds;
					console.log(this.second);
					// console.log(this.second);
					// 倒计时未结束时开始倒计时
					if (this.second > 0) {
						clearInterval(ds)
						ds = setInterval(() => {
							this.second--
							if (this.second <= 0) {
								this.second = 0
								clearInterval(ds)
							}
						}, 1000);
					} else {
						// 否则结束倒计时，开始揭露身份
						this.second = 0
					}
				} if (this.werewolf_detail.status == 0) {
					
				}
				this.getinfo();
			},


			// 获取反贼杀首页信息
			async werewolf2() {
				let res = await this.$http.index.werewolf()
				// console.log(res);
				this.gamestatus = res.data.werewolf_detail.status //游戏
				this.werewolf_detail = res.data.werewolf_detail
				this.werewolf_log = res.data.werewolf_log //村民信息
				this.werewolf_log2 = res.data.werewolf_log //村民信息
				this.phase = res.data.werewolf_detail.phase
				this.join_num = res.data.join_num
				this.invest_status = res.data.invest_status
				this.last_result = res.data.last_result
				this.my_invest_sum = res.data.my_invest_sum
				// 获取我投资的房屋
				this.building_id = res.data.building_id?res.data.building_id:0
				// 判断是否开局
				if (this.werewolf_detail.status == 1) {
					let currentTimestamp = new Date().getTime();
					let time = res.data.werewolf_detail.start_time
					let remainingTime = (time * 1000 + 60000) - currentTimestamp;
					var remainingSeconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
					this.second = remainingSeconds;
					console.log(this.second);
					// console.log(this.second);
					// 倒计时未结束时开始倒计时
					if (this.second > 0) {
						clearInterval(ds)
						ds = setInterval(() => {
							this.second--
							if (this.second <= 0) {
								this.second = 0
								clearInterval(ds)
							}
						}, 1000);
					} else {
						// 否则结束倒计时，开始揭露身份
						this.second = 0
					}
				} if (this.werewolf_detail.status == 0) {
					
				}
			},



		},
	}
</script>

<style lang="less">
	.zone {
		background: url('http://img.cpgm.cc/panda/static/game/bg.jpg');
		background-size: 100% 100%;
		min-height: 100vh;
	}

	.nav-bar2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 60px;
		padding: 0px 10px;
	}

	.n_left {
		text {
			color: #fff;
			font-weight: 600;
			font-size: 25px;
			margin-left: 5px;
		}
	}

	.shouxu {
		color: #fff;
		font-size: 14px;
	}

	.main {
		padding: 10px;
		position: relative;
	}

	.posa1 {
		position: absolute;
		top: 40px;
		right: 0;
		width: 54px;
		height: 27px;
		background: rgba(0, 0, 0, 0.6);
		box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
		border-radius: 14px 0 0 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;

		text {
			color: #fff;
			font-size: 12px;
		}
	}



	.posa2 {
		position: absolute;
		top: 80px;
		right: 0;
		width: 54px;
		height: 27px;
		background: rgba(0, 0, 0, 0.6);
		box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
		border-radius: 14px 0 0 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;

		text {
			color: #fff;
			font-size: 12px;
		}
	}

	.posa3 {
		position: absolute;
		top: 120px;
		right: 0;
		width: fit-content;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 5px;
		background: rgba(0, 0, 0, 0.6);
		box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
		border-radius: 14px 0 0 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;

		text {
			color: #fff;
			font-size: 12px;
		}
	}

	

	.stat {
		width: 40%;
		padding: 10px;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
		border-radius: 5px;

		p {
			color: #fff;
		}
	}

	.stat-b {
		background: #FFFFFF;
		box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		opacity: 0.9;
		padding: 10px;
		margin-top: 5px;
		display: flex;
		align-items: center;

		text:nth-child(1) {
			color: #000000;
			font-size: 20px;
			margin-right: 5px;
		}

		text:nth-child(2) {
			color: #000000;
			font-size: 12px;
		}
	}

	.box {
		position: relative;
		width: 100%;
		margin-top: 20px;

		.bg {
			width: 100%;
		}

		.img {
			position: absolute;
		}

		.item {
			position: absolute;
			width: 24%;

			image {
				width: 100%;
			}
		}
	}

	.active {
		border-radius: 5px;
		border: 2px solid #127700;
		background: rgba(0, 255, 118, 0.4);
	}




	.img1 {
		top: 6%;
		left: 10%;
	}

	.img2 {
		left: 44%;
		top: 6%;
	}

	.img3 {
		left: 72%;
		top: 6%;
	}

	.img4 {
		left: 3%;
		top: 39%;
	}

	.img5 {
		left: 47%;
		top: 39%;
	}

	.img6 {
		left: 73%;
		top: 39%;
	}

	.img7 {
		left: 3.5%;
		top: 72%;
	}

	.img8 {
		left: 60%;
		top: 71%;
	}

	.bottom {
		position: relative;
		display: flex;
		align-items: center;
		margin-top: 50px;
		justify-content: center;

		.das {
			width: 80px;
			position: absolute;
			top: -60%;
			left: 18%;
			z-index: 1;
		}
	}

	.btn {
		width: 80%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 10px;
		height: 55px;
	}

	.left {
		width: 60%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000000;
		font-size: 14px;
		font-weight: 600;
	}

	.right {
		width: 39%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000000;
		font-size: 14px;
		font-weight: 600;
	}

	.line {
		width: 1px;
		height: 32px;
		background: rgba(0, 0, 0, 0.1);
	}

	.numbox {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 106%;
		left: -3%;
		bottom: 10%;
		background: linear-gradient(180deg, #313145 0%, #20222E 100%);
		border-radius: 14px;
		border: 1px solid #21232F;

		.left {
			width: 38%;
			text-align: center;
			color: #fff;
			font-size: 12px;
			zoom: 0.85;
			font-weight: normal;
		}

		.sjbox {
			width: 61%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 12px;
			}

			text {
				color: #fff;
				font-size: 12px;
				zoom: 0.85;
			}
		}
	}

	.line2 {
		width: 1px;
		background: #fff;
		height: 10px;
	}

	.botbtn {
		width: 70%;
		height: 50px;
		margin: 20px auto 0;
		background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%);
		box-shadow: 0px 5px 0px 0px rgba(186, 133, 60, 1);
		border-radius: 5px;
		z-index: 9;
		color: #000000;
		font-size: 14px;
		font-weight: 600;
	}

	.popbox {
		background: linear-gradient(180deg, #C7DDDA 0%, #FFFFFF 100%);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		padding: 15px;
	}

	.title {
		padding: 10px;
		font-size: 20px;
		font-weight: 600;
		color: #000000;
		text-align: center;
	}

	.closed {
		width: 30px;
		position: absolute;
		top: 15px;
		right: 15px;
	}

	.procontent {
		margin-top: 20px;

		.button {
			width: 80%;
			height: 50px;
			background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
			border-radius: 5px;
			margin: 20px auto 0;
			color: #FFFFFF;
		}
	}

	.flexcen {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.price {
		background: #FFFFFF;
		border-radius: 5px;
		width: 23%;
		padding: 10px 0;
		margin: 4px 2px;
		text-align: center;
		font-size: 13px;
	}
	.w3 {
		background: #FFFFFF;
		border-radius: 5px;
		width: 31%;
		padding: 10px 0;
		margin: 4px 2px;
		text-align: center;
		font-size: 13px;
	}

	.explain {
		color: #696969;
		margin: 20px auto;
		text-align: center;
	}


	.fightbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.fight {
		width: 90%;
	}









	// 弹窗
	.maskbox {
		background: #fff;
		border-radius: 18px;
		padding: 15px 10px;

		p {
			text-align: center;
			margin-top: 10px;

			text {
				color: #239D4C;
				font-weight: 600;
			}
		}

		.m_meat {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		image {
			width: 80px;
		}
	}

	.imgtit {
		width: 65px;
		height: 65px;
		background: #FFFFFF;
		border-radius: 50%;
		padding: 2px;
		position: relative;
		top: -30px;
		margin: 0 auto;
	}

	.in {
		background: linear-gradient(180deg, #FE9F0D 0%, #FED90D 100%);
		width: 100%;
		height: 100%;
		border-radius: 50%;

		image {
			width: 100%;
			border-radius: 50%;
		}
	}

	.mbg2 {
		padding-top: 30px;
		background: linear-gradient(180deg, #C7DDDA 0%, #FFFFFF 100%);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border-radius: 18px;
	}

	.masktit {
		position: relative;
		left: 5%;
		width: 90%;
		margin: 0 auto;
		margin-top: -50%;
	}

	.m_title2 {
		text {
			font-size: 25px !important;
			color: #000000 !important;
		}
	}

	.m_title3 {
		display: flex;
		align-items: center;
		justify-content: center;
		text {
			font-size: 25px !important;
			color: #fff !important;
		}
	}

	.maskbtn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
	}


	.btn3 {
		width: 90%;
		height: 50px;
		margin: 0 10px;
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		color: #fff;
		font-weight: 600;
	}

	.btn4 {
		width: 90%;
		height: 50px;
		margin: 0 10px;
		background: #FFFFFF;
		border-radius: 5px;
		color: #000000;
		font-weight: 600;
	}

	.m_title2 {
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: 25px !important;
			color: #000000 !important;
		}
	}

	.whitebg {
		padding: 20px;
		border-radius: 9px;
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 80px;
		}

		p {
			color: #696969;
			font-size: 14px;

			text {
				color: #000000;
			}
		}
	}

	.black {
		color: #000 !important;
		font-weight: 600;
	}

	.active2 {
		background: #FFFFFF linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		color: #fff;
	}


	.stat2 {
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		display: flex;
		align-items: center;
		width: fit-content;
		padding-right: 10px;

		image {
			width: 38px;
			margin-right: 10px;
		}

		text {
			color: #fff;
			font-size: 18px;
		}
	}

	.minh {
		min-height: 100px;
	}

	.sanjbox {
		position: absolute;
		top: -30%;
		left: 42%;
		background: #fff;
		border-radius: 15px;
		padding: 4px 10px;
		display: flex;
		align-items: center;
		font-size: 12px;
		image {
			width: 18px;
		}
	}

	.sanjbox::after {
		content: "";
		position: absolute;
		bottom: -11px;
		left: 10%;
		z-index: 1;
		width: 0px;
		height: 0px;
		border: 6px solid transparent;
		border-top: 6px solid #fff;
	}


.mbg3 {
	background: rgba(0, 0, 0, 0.8);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	border-radius: 18px;
	padding-top: 30px;
}


.checkgroup {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 15px;
	margin: 0 auto;
	margin-top: 10px;
}

.explain2 {
	font-size: 12px;
}

.yellow {
	color: #FF456B;
}



.mask_xy {
	background:  #fff;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	border-radius: 18px;
	padding: 20px;

	.button {
		width: 80%;
		height: 54px;
		background:  linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		color: #fff;
		margin: 0 auto;
	}
}

.x_title {
	color: #000000;
	font-size: 24px;
	font-weight: 600;
	text-align: center;
}

.x_con {
	font-size: 12px;
	color: #000000;
	padding: 10px;
	margin: 10px 0;
}
</style>